<template>
  <div class="home">
    <div ref="box" id="box">
      {{ msg }}
      <button @click="num++">++</button>
      <h1 ref="num">{{ num }}</h1>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "hello world",
      num: 1,
    };
  },
  beforeCreate() {
    console.log(this.msg);
  },
  created() {
    console.log(this.msg);
    var box1 = this.$refs.box;
    //在vue中拿到dom节点的使用ref拿
    console.log(box1);
    //在这里拿不到dom节点
  },
  mounted() {
    var box = document.getElementById("box");
    var box1 = this.$refs.box;
    //在vue中拿到dom节点的使用ref拿
    console.log(box);
    console.log(box1);
  },
  //dom挂载之后
  beforeUpdate() {
    // console.log(this.num);
    // console.log(this.$refs.num.innerHTML);
  },
  //数据变化了视图更新之前
  updated() {
    console.log(this.num);
    console.log(this.$refs.num.innerHTML);
  },
  //数据变了 视图更新之后
};
</script>
